<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">
      <div class="normal-box-hd clearfix">
        <div class="normal-box-title">
          <div class="decorate-square"></div>
          <h2>用户问题反馈</h2>
        </div>
      </div>
      <div class="normal-box-bd">
        <!-- <Card style="margin-bottom: 10px">
          <div class="normal-list-page-hd clearfix">
            <Select v-model="queryData.type"
                    style="width: 200px">
              <Option v-for="item in typeList"
                      :value="item.value"
                      :key="item.value">{{ item.label }}</Option>
            </Select>
            <Button type="primary"
                    custom-icon="iconfont icon-chaxun"
                    size="small"
                    @click="inQuire">查询</Button>
          </div>
        </Card> -->
        <div class="normal-list-page-mod">
          <div class="mb-2">
            <!-- <Button-group>
              <Button custom-icon="iconfont icon-shanchusekuai" size="small" type="error" @click="batchDel">
                删除
              </Button>
            </Button-group> -->
          </div>
          <div class="normal-list-page-bd">
            <Table border
                   :loading="list.loading"
                   :columns="list.columns"
                   :data="list.tableData"
                   @on-selection-change="selectionChange">
                   <template slot-scope="{ row }"
                        slot="isRead">
                 <Button v-if="row.isRead==1" type="success" plain size="small">已读</Button>
                  <Button v-if="row.isRead==0" type="warning" plain size="small">未读</Button>
                  <span v-else></span>
              </template>
            </Table>
          </div>
          <div class="normal-list-page-ft clearfix">
            <Page class="fr"
                  :total="queryData.totalRecord"
                  :page-size="queryData.pageSize"
                  :current="queryData.page"
                  @on-change="changePage"
                  @on-page-size-change="onPageSizeChange"
                  show-elevator
                  show-total
                  show-sizer></Page>
          </div>
        </div>
      </div>
      <Modal v-model="modal.mallAdvertising.bigPicVisible"
             width="1000px">
        <img :src="modal.mallAdvertising.bigPicUrl"
             style="width: 50%; height: 50%; display: block; margin: 0 auto" />
        <div slot="footer" />
      </Modal>
    </div>
  </div>
</template>
<script>
import userComplaintApi from '@/api/zhcg/userFeedback.js'
import { Message } from 'iview'
export default {
  name: 'user',
  data () {
    return {
      modal: {
        positionList: [
          { id: 1, name: '积分商城' },
          { id: 2, name: '新闻快讯' },
          { id: 3, name: '政策制度' },
          { id: 4, name: '分类知识' },
          { id: 5, name: '最新资讯' }
        ],
        mallAdvertising: {
          isShow: false,
          bigPicVisible: false,
          loading: true,
          bigPicUrl: '',
          type: 'create', // create 新建，update 修改
          title: '新建',
          rules: {
            title: [
              {
                required: true,
                message: '请填写标题',
                trigger: 'blur'
              }
            ],
            content: [
              {
                required: true,
                message: '请填写内容',
                trigger: 'blur'
              }
            ]
          },
          formData: {}
        }
      },
      bigPicVisible: false,
      bigPicUrl: '',
      typeList: [
        {
          value: '',
          label: '所有类型'
        },
        {
          value: '1',
          label: '用户端'
        },
        {
          value: '2',
          label: '回收端'
        },
        {
          value: '3',
          label: ' 政府端'
        },
        {
          value: '4',
          label: '清运app'
        },
        {
          value: '5',
          label: '物业app'
        },
        {
          value: '6',
          label: '督导员APP'
        }
      ],
      // 列表
      list: {
        loading: false,
        selections: [],
        // 列表展示数据
        tableData: [],
        // 表格表头
        columns: [
          // {
          //   type: 'selection',
          //   width: 50,
          //   align: 'center'
          // },
          /** 开始自动生成 */
        //   { title: 'id', key: 'id', align: 'center', width: '100px' },
          { title: '用户id', key: 'userId', align: 'center', width: '100px' },
          { title: '用户名', key: 'userName', align: 'center', width: '140px' },
          { title: '标题', key: 'title', minWidth: 140, align: 'center' },
          { title: '内容', key: 'content', minWidth: 200, align: 'center' },
          {
            title: '图片',
            key: 'imgUrl',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.imgUrl
                },
                style: {
                  width: '100%'
                  //   height: "35px",
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.imgUrl) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },

          //   {
          //     title: '类型',
          //     key: 'type',
          //     align: 'center',
          //     minWidth: 100,
          //     render: (h, params) => {
          //       if (params.row.type === 1) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: '用户端'
          //               }
          //             },
          //             '用户端'
          //           )
          //         ])
          //       } else if (params.row.type === 2) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: ' 回收端'
          //               }
          //             },
          //             ' 回收端'
          //           )
          //         ])
          //       } else if (params.row.type === 3) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: ' 政府端 '
          //               }
          //             },
          //             ' 政府端 '
          //           )
          //         ])
          //       } else if (params.row.type === 4) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: ' 清运app '
          //               }
          //             },
          //             ' 清运app '
          //           )
          //         ])
          //       } else if (params.row.type === 5) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: ' 物业app '
          //               }
          //             },
          //             ' 物业app '
          //           )
          //         ])
          //       } else if (params.row.type === 6) {
          //         return h('div', [
          //           h(
          //             'span',
          //             {
          //               style: {
          //                 display: 'inline-block',
          //                 width: '100%',
          //                 overflow: 'hidden',
          //                 textOverflow: 'ellipsis',
          //                 whiteSpace: 'nowrap'
          //               },
          //               domProps: {
          //                 title: '  督导员APP '
          //               }
          //             },
          //             '  督导员APP '
          //           )
          //         ])
          //       }
          //     }
          //   },

          {
            title: '提交时间',
            key: 'createTime',
            align: 'center',
            width: '120px'
          },
          {
            title: '反馈人',
            key: 'solveName',
            align: 'center',
            width: '120px'
          },
          {
            title: '反馈标题',
            key: 'solveTitle',
            align: 'center',
            width: '120px'
          },
          {
            title: '反馈内容',
            key: 'solveContent',
            align: 'center',
            width: '200px'
          },
          {
            title: '反馈照片',
            key: 'solveImg',
            align: 'center',
            minWidth: 100,
            render: (h, params) => {
              return h('img', {
                attrs: {
                  src: params.row.solveImg
                },
                style: {
                  width: '100%'
                  //   height: "35px",
                },
                on: {
                  click: () => {
                    this.showBigPic(params.row.solveImg) // 此处再用一个方法，建一个modal把图放大。
                  }
                }
              })
            }
          },

          {
            title: '解决时间',
            key: 'solveTime',
            align: 'center',
            width: '120px'
          },
          {
            title: '用户是否已读',
            key: 'isRead',
            align: 'center',
            width: '120px',
            slot: 'isRead'
          }
          /** 自动生成结束 */
          //   {
          //     title: '操作',
          //     align: 'center',
          //     minWidth: 100,
          //     fixed: 'right',
          //     render: (h, params) => {
          //       return h('div', { class: 'action-group' }, [
          //         h(
          //           'Tooltip',
          //           {
          //             props: {
          //               placement: 'right',
          //               content: '删除'
          //             },
          //             style: {
          //               cursor: 'pointer'
          //             }
          //           },
          //           [
          //             h(
          //               'Button',
          //               {
          //                 props: {
          //                   type: 'error',
          //                   size: 'small'
          //                 },
          //                 style: {
          //                   marginRight: '5px',
          //                   padding: '1px 2px'
          //                 },
          //                 on: {
          //                   click: () => {
          //                     this.delData([params.row.id])
          //                   }
          //                 }
          //               },
          //               [
          //                 h('Icon', {
          //                   props: {
          //                     type: ' iconfont icon-shanchusekuai',
          //                     size: 18
          //                   }
          //                 })
          //               ]
          //             )
          //           ]
          //         )
          //       ])
          //     }
          //   }
        ]
      },
      // 页面查询数据
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0
        // name: ''
      }
    }
  },
  methods: {
    showBigPic (item) {
      this.modal.mallAdvertising.bigPicVisible = true
      this.modal.mallAdvertising.bigPicUrl = item
    },
    // 获取列表
    getTableData () {
      const that = this
      that.queryData.totalRecord = undefined
      userComplaintApi.getPageList(that.queryData)
        .then((res) => {
          that.list.tableData = res.data.list
          that.queryData.totalRecord = res.data.totalRecord
          that.queryData.page = res.data.pageNum
          that.queryData.limit = res.data.pageSize
        })
        .catch((error) => {
          Message.error(error)
        })
    },

    // 删除
    delData (ids) {
      if (!ids.length) {
        return
      }
      this.$Modal.confirm({
        title: '确认删除',
        content:
          '<p>您确认删除id为 <strong>' +
          ids.toString() +
          '</strong> 的记录吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
        loading: true,
        onOk: () => {
          MallBillApi.del({
            ids: ids
          }).then((res) => {
            this.$Modal.remove()
            if (!res.code) {
              this.$Notice.success({
                title: '删除成功'
              })
              this.queryData.page = 1
              this.getTableData()
            } else {
              this.$Notice.error({
                title: res.message
              })
            }
          })
        }
      })
    },

    // 排量删除
    batchDel () {
      let ids = []
      this.list.selections.forEach((element) => {
        ids.push(element.id)
      })
      if (!ids.length) {
        this.$Message.error({
          content: '请先选择要删除的项！',
          duration: 3
        })
      }
      this.delData(ids)
    },
    // 查询
    inQuire () {
      const that = this
      that.queryData.page = 1
      that.getTableData()
    },
    // 全选，不全选
    selectionChange (args) {
      this.list.selections = args
    },

    // 每页显示记录数变更
    onPageSizeChange (pageSize) {
      this.queryData.limit = pageSize
      this.getTableData()
    },

    // 换页
    changePage (page) {
      this.queryData.page = page
      this.getTableData()
    }
  },

  created () {
    this.getTableData()
  }
}
</script>
